---
title: Disclosure Group
description: A collection of disclosure components that manage multiple collapsible sections while maintaining structured content visibility.
order: 6
published: true
references: ["https://react-spectrum.adobe.com/react-aria/DisclosureGroup.html#props"]
---

## Basic
A disclosure group, also known as an accordion, is a set of collapsible sections that help organize content in a structured, easy-to-navigate format. Users can expand or collapse each section as needed, improving readability and making it easier to browse large amounts of information.
<How className="w-full max-w-sm" toUse="navigation/disclosure-group/disclosure-group-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/disclosure
```

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='disclosure-group'/>

## Anatomy
```
import {
 DisclosureItem as Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureTrigger,
} from "@/components/ui/disclosure-group"
```

```
<DisclosureGroup defaultExpandedKeys={["x"]}>
  <Disclosure id="x">
    <DisclosureTrigger>Q1</DisclosureTrigger>
    <DisclosurePanel>A1</DisclosurePanel>
  </Disclosure>
  <Disclosure id="y">
    <DisclosureTrigger>Q2</DisclosureTrigger>
    <DisclosurePanel>A2</DisclosurePanel>
  </Disclosure>
  <Disclosure id="z">
    <DisclosureTrigger>Q3</DisclosureTrigger>
    <DisclosurePanel>A3</DisclosurePanel>
  </Disclosure>
</DisclosureGroup>
```

## Default expanded
Set the initially expanded sections by providing an array of keys to the `defaultExpandedKeys` prop. These keys can be either numbers or strings.
<How className="w-full max-w-sm" toUse="navigation/disclosure-group/disclosure-group-default-expand-demo" />

## Allow multiple expanded
Allow multiple sections to be expanded at once by using the `allowsMultipleExpanded` prop.
<How className="w-full max-w-sm" toUse="navigation/disclosure-group/disclosure-group-allow-multiple-expand-demo" />


## Nested
Disclosure Groups can be nested to create a hierarchy of sections. Use the DisclosurePanel component to add content to each nested group. To ensure a polished appearance, make sure the trigger within the nested group includes a span, as shown below:
```tsx {6}
<DisclosurePanel className="bg-muted">
  <DisclosureGroup allowsMultipleExpanded>
    {item.children.map((child, childIndex) => (
      <Disclosure key={childIndex} id={childIndex}>
        <DisclosureTrigger>
          <span>
```
Check out the example below to see it in action.
<How className="w-full max-w-sm" toUse="navigation/disclosure-group/disclosure-group-nested-demo" />

## With icon
You can add icons to the disclosure group to make it more visually appealing.
<How className="w-full max-w-sm" toUse="navigation/disclosure-group/disclosure-group-with-icon-demo" />

## Disabled
Disable specific sections by adding the `isDisabled` prop to the corresponding item.
<How className="w-full max-w-sm" toUse="navigation/disclosure-group/disclosure-group-disabled-demo" />
